<template>
    <div class="drag-panel-container">
        <div class="drag-panel-item"></div>
    </div>
</template>


<script>
export default {
    name:'drag-panel',
    data(){
        return {}
    },
    mounted() {
    const position = { x: 0, y: 0 };

    interact(".drag-panel-item").draggable({
      listeners: {
        start(event) {
          console.log(event.type, event.target);
        },
        move(event) {
          position.x += event.dx;
          position.y += event.dy;

          event.target.style.transform = `translate(${position.x}px, ${position.y}px)`;
        },
      },
    });
  
  },    
}
</script>


<style lang="scss" scoped>
.drag-panel-container{
    width: 100%;
    height: 100%;
}
</style>